<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> test - validate </title>

        <link href="" rel="stylesheet" />
        <script src="vendor/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"> </script>
        <script src="vendor\jQuery-validate\jquery.validate.min.js" type="text/javascript" > </script>
        <script src="vendor\jQuery-validate\additional-methods.min.js" type="text/javascript"> </script>
        <script src="vendor\jQuery-validate\messages_zh.js" type="text/javascript"> </script>
        
        <style type="text/css">
            *{  /*
                margin:0;
                padding:0;*/
            }
            .div1{
                border:#066093 thin solid;
                box-shadow: 2px 3px 5px 0px #999 ,-2px -1px 5px 0px #69c ;
                width: 600px;
                height: 300px;
                padding: 10px;
                text-align: center;
                margin: 10px auto;
                border-radius: 3px;
                position: relative;
            }
            .headtip{
                position: absolute;
                display: inline-block;
                padding: 5px;
                background-color: #3BA7CB;
                border-radius:3px;
                top:-15px;
                left: 5px;
                color: #fff;
                font-style: italic;
                font-weight: bolder;
                font-family: microsoft yahei;
            }
            #myform1,#myform2{
                text-align: right;
                /*
                    background-color: #9999CC;
                */
                display: inline-block;
            }
            .centerblock{
                display: block;
                text-align: center;
                margin: 0px;
            }
        </style>
        <script type="text/javascript">
            //http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
            $(function(){
                $("#myform1").validate({
                    rules:{
                        username:"required",
                        password:{ required:true, rangelength:[5,16] },
                        confirm_pass:{
                            required:true,
                            equalTo:"#password"
                        },
                        email:"required email"
                    },
                    //要忽略的元素：
                    ignore:".ignore", 
                    //检测方式： 除了focusCleanup其他默认都为true
                    onkeyup:false,  //输入时检测
                    //onsubmit:true,
                    //onfocusout:true,  //写默认值会报错？
                    //onclick:true,       //单击选框时
                    //focusInvalid:true,  //聚焦未通过验证的
                    //focusCleanup:false, //聚焦后清空输入，避免与focusInvalid同时使用
                    submitHandler:function(form){
                                    alert("submitted");   
                                    form.submit(); 
                                    //如果以普通方式提交表单, 使用 form.submit()，而不是 $(form).submit()
                                    //或者使用AJAX：
                                    //$(form).ajaxSubmit(); 
                    },
                     //只是验证不提交
                    debug:true , 
                    //错误信息标签的class,默认为error
                    errorClass:"invalid" , 
                    //包裹错误信息的标签,默认label  
                    errorElement:"em",   
                    //指定错误放置位置，默认是：error.appendTo(element.parent());
                    //error存放的是错误信息的标签<label ……>错误信息</label>;element存放的是校验的input元素
                    errorPlacement:function(error, element){  
                       //alert(element.parent().html());
                       //error.appendTo(element.parent());
                       //error.insertAfter(element);
                       if (element.attr("name") == "password" || element.attr("name") == "confirm_pass"){   
                            $("<br />").insertAfter(element); 
                            error.appendTo(element.parent());
                       }else
                            element.parent().parent().siblings().last().html(error);
                    },
                    //包裹错误信息标签的标签
                    wrapper:"b",
                    //errorContainer:"#errorinfo",  ！好像无效
                    //将错误信息append到哪个ID标签，会出现重复叠加状况，与errorPlacement任选其一
                    //errorLabelContainer:"#errorinfo",  
                    //每个字段验证通过后添加的类样式或执行函数：
                    success:"valid" ,  // function(label){ }
                    //异步验证
                    //remote: "check.php"
                    remote: {
                        url: "check.php",     //后台处理程序
                        type: "post",               //数据发送方式
                        dataType: "json",           //接受数据格式
                        data: {//要传递的数据
                                username: function(){return $("#username").val(); }
                        }
                    }
        });//end validate()
                
                //可以设置validate的默认值，写法如下：
                $.validator.setDefaults({
                        submitHandler : function(form) {
                            alert("submitted!");
                            form.submit();
                        }
                });
                //添加自定义方法
                /*addMethod(name,method,message)方法
                                    参数 name 是添加的方法的名字
                                    参数 method 是一个函数，接收三个参数 (value,element,param) 
                  value 是元素的值，element 是元素本身，param 是参数。
                  message 是显示的信息
                 */
                //例如比如有一个字段，只能输一个字母，范围是 a-f，写法如下：然后添加rules   af:["a","f"]
                $.validator.addMethod("af",function(value,element,params){  
                    if(value.length>1){
                        return false;
                    }
                    if(value>=params[0] && value<=params[1]){
                        return true;
                    }else{
                        return false;
                    }
                },"必须是一个字母,且a-f");
        });
        </script>
    </head>
    <body>
  <!--
      一、写在JS中，如上面；
      二、写在Class中，将validate({ })中内容去掉，但要注意：
        1、使用class="{}"的方式，必须引入包：jquery.metadata.js
        2、可以使用如下的方法，修改提示内容：
            class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
        3、在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
            class="{required:true,minlength:5,equalTo:'#password'}"
        4、当出现不符合规则时，系统默认添加的提示信息格式如下：
        <label for="email">邮件：
           <input type="text" name="email" id="email" class="required email" 
                data-rule-required="true" data-rule-email="true" data-msg-required="请输入您的电子邮件地址" data-msg-email="请输入一个有效的电子邮件地址" />  
           <label id="username-error" class="error" for="username">必须填写</label>            
        </label>
  -->
        <h1 align="center">test jQuery-validate Page</h1>
        <div class="div1">
            <div class="headtip">
                Form1
            </div>
        <form action="" method="post" id="myform1">
            <p>
            <label for="username">用户名：
                <input type="text" name="username" id="username" class="required" />                
            </label>
            </p>
            <p>
            <label for="password">密码：
                <input type="password" name="password" id="password" />                
            </label>
            </p>
            <p>
            <label for="confirm_pass">重复密码：
                <input type="password" name="confirm_pass" id="confirm_pass" />                
            </label>
            </p>
            <p>
            <label for="email">Email：
                <input type="text" name="email" id="email" />                
            </label>
            </p>
            <p class="centerblock">
            <input type="button" value="testbtn" name="testbtn" /> &nbsp;&nbsp;
            <input type="submit" name="submit" value="submit" />
            </p>
            <p id="errorinfo">
                <!--<label id="invalidinfo"> </label>-->
            </p>
        </form>
        </div>
        <!--
            next form
        -->
        <div style="height: 15px;"> </div>
        <div class="div1">
            <div class="headtip">
                Form2
            </div>
        <form action="" method="post" id="myform2">
            <p>
            <label for="username2">用户名：
                <input type="text" name="username2" id="username2" class="required" />                
            </label>
            </p>
            <p>
            <label for="password2">密码：
                <input type="password" name="password2" id="password2" />                
            </label>
            </p>
            <p>
            <label for="confirm_pass2">重复密码：
                <input type="password" name="confirm_pass2" id="confirm_pass2" />                
            </label>
            </p>
            <p>
            <label for="email2">Email：
                <input type="text" name="email2" id="email2" />                
            </label>
            </p>
            <p class="centerblock">
            <input type="button" value="testbtn" name="testbtn" /> &nbsp;&nbsp;
            <input type="submit" name="submit" value="submit" />
            </p>
        </form>
        </div>
        
        <div class="div1">
            <fieldset>
                <legend>登录模块</legend>
                <p> 这里是一些内容！</p>
            </fieldset>
        </div>
    </body>
</html>

